<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useField } from 'vee-validate'
import { useStore } from 'vuex'
import otherLogin from './otherLogin.vue'
import { loginSend } from '@/api/login'
// import { isRequiredAccount, isRequiredPassword1 } from '../validation'
const phoneRegExp = /^[a-zA-Z][a-zA-Z0-9]{5,20}/
const passwordRegExp = /[a-zA-Z0-9]{6,20}/
const checkbox = ref(false)
const store = useStore()
const router = useRouter()
const emits = defineEmits(['update:flag'])

const isRequiredAccount = (value) => {
  if(value && phoneRegExp.test(value)){
    return true
  }

  return '手机格式错误'
}
const isRequiredPassword1 = (value) => {
  if(value && passwordRegExp.test(value)){
    return true
  }

  return '密码格式错误'
}

const { value: accountValue,errorMessage : errorAccount } = useField('fieldName', isRequiredAccount);
const { value: passwordValue, errorMessage : errorPassword } = useField('fieldName', isRequiredPassword1);
const account = ref(accountValue) 
account.value = 'xiaotuxian001'
const password = ref(passwordValue)
password.value = '123456'




const login = async () => {
 if(!account.value) return ElMessage.error('请填写手机号')
 if(!password.value) return ElMessage.error('请填写密码')
 if(!checkbox.value) return ElMessage.error('请勾选条款协议')
 if(errorAccount.value) return ElMessage.error('手机号码格式错误')
 if(errorPassword.value) return ElMessage.error('密码格式错误')


 const data = await loginSend({account: account.value,password: password.value})
  store.commit('SET_INFO', data.result)
  localStorage.setItem('token',data.result.token )
  localStorage.setItem('user', JSON.stringify(data.result))
  ElMessage({
    message: '登录成功',
    type: 'success',
  })
  router.replace('/')
}


const smsLonin = () => {
  emits('update:flag',false)
  // emit('isFlag','sms')
}

</script>

<template>
  <div class="password-login-view">
    <p class="sms-login" @click="smsLonin">手机验证码登录</p>
     <el-input v-model="account" class="w-50 m-2" type="text" :clearable="true" placeholder="请输入用户名称/手机号码">
        <template #prefix>
          <i class="iconfont icon-jurassic_user"></i>
        </template>
      </el-input>
      <div class="err-info">{{errorAccount}}</div>
       <el-input v-model="password" class="w-50 m-2" type="text" :clearable="true" show-password placeholder="请输入密码">
        <template #prefix>
          <i class="iconfont icon-suo"></i>
        </template>
      </el-input>
      <div class="err-info"> {{errorPassword}}</div>
      <p class="terms-checkbox">
         <el-checkbox v-model="checkbox" label="同意" size="large">我已同意《隐私条款》和《服务条款》</el-checkbox>
      </p>
      <div class="login-btn" @click="login" :style="{backgroundColor: account && password && checkbox && !errorAccount && !errorPassword ? '#1abc9c' : '#bcf1e5'}">登录</div>
      <div class="btns-reg-pass">
        <span><router-link to="/registeredAndLogin/forget">忘记密码</router-link></span>
             <span><router-link to="/registeredAndLogin/registered">免费注册</router-link></span>
      </div>
      <other-login></other-login>
  </div>

</template>

<style lang="scss">
.password-login-view{

  .sms-login{
    text-align: right;
    color: #1abc9c;
    margin-bottom: 10px;
    cursor: pointer;
  }

  input{
    height: 50px;
    outline: none;
  }

  .el-input__wrapper.is-focus{
    box-shadow:  rgb(220, 223, 230) 0px 0px 0px 1px inset
  }
  
  .el-input__wrapper{
    border-radius: 0;
    // border
  }


  .err-info{
    height: 20px;
    line-height: 20px;
    color: red;
  }

  .terms-checkbox{
    .el-checkbox__label{
      
    font-size: 12px;
    }
  }

  .login-btn{
    width: 100%;
    height: 50px;
    // background-color: #1abc9c;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    margin: 10px 0;
  }

  .btns-reg-pass{
    display: flex;
    justify-content: space-between;
  }
}
</style>
